import {
  GestureResponderEvent,
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import Animated, {
  interpolate,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated'
import VideoMenu from './videoMenu'
import { observer } from 'mobx-react-lite'
import { useShowComment } from './videoFullCard'
import {
  Directions,
  Gesture,
  GestureDetector,
} from 'react-native-gesture-handler'
import { useStore } from '../../store'
import { common } from '../../assets/style/common'
import VideoFocus from './videoFocus'

interface CommentBoxProp {
  visible?: boolean
  style?: ViewStyle
  height: number
  onLikePress?: (e: GestureResponderEvent) => void
}
const CommentBox = observer(function (props: CommentBoxProp) {
  const { videoSwiperStore } = useStore()
  const videoInfo = videoSwiperStore.currentVideo
  const gesture = Gesture.Fling().direction(Directions.DOWN)
  const showComment = useShowComment()
  const comment = [
    {
      id: 1,
      authorId: '12343',
      desc: 'asadadadadadadssdad',
      author: '瘦瘦火锅',
      address: '山东',
      date: '2.18',
      likeStatus: 'like',
      cover: '',
    },
    {
      id: 2,
      authorId: '12343',
      desc: 'asadadadadadadssdad',
      author: '噼里啪啦',
      address: '山东',
      date: '2.18',
      likeStatus: 'like',
      cover: '',
    },
  ]
  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: props.height,
      transform: [
        {
          translateY: withTiming(
            interpolate(showComment.value, [0, 1], [props.height, 0]),
            { duration: 300 },
          ),
        },
      ],
    }
  }, [props.height])

  return (
    <Animated.View style={[style.container, animatedStyle]}>
      <GestureDetector gesture={gesture}>
        <View style={style.containerWrap}>
          <View style={style.bar} />
          <View style={[style.header, common.flexCol]}>
            <Image style={style.authorCover} source={videoInfo?.authorCover} />
            <Text style={style.author}>{videoInfo?.author}</Text>
            <VideoFocus />
          </View>
          <ScrollView style={style.scrollView}>
            <View>
              <Text style={style.title}>{videoInfo?.title}</Text>
              <Text style={style.desc}>{videoInfo?.description}</Text>
              <View style={[common.flexCol, style.signWrap]}>
                <Text style={style.sign}>#话题1</Text>
                <Text style={style.sign}>
                  #话题2qweqweqweqweqweqweqweqweqweqw
                </Text>
                <Text style={style.sign}>#话题2323qeqasdqwqweqweqwe</Text>
              </View>
              <View style={[style.tip, common.flexCol]}>
                <Text style={style.date}>2月1日 广东省</Text>
                <Pressable style={style.likeBtn}>
                  <Text style={style.like}>不喜欢</Text>
                </Pressable>
              </View>
            </View>
            <View style={style.commentWrap}>
              <Text style={style.commentTitle}>2条评论</Text>
              {comment.map(item => (
                <View key={item.id}>
                  <View>
                    <Text>{item.author}</Text>
                    <Text>{item.desc}</Text>
                    <View>
                      <Text>
                        {item.address} {item.date}
                      </Text>
                      <Text>回复</Text>
                      <Text>赞</Text>
                      <Text />
                    </View>
                  </View>
                </View>
              ))}
            </View>
          </ScrollView>
          <SafeAreaView style={style.bottom}>
            <VideoMenu theme={'black'} />
          </SafeAreaView>
        </View>
      </GestureDetector>
    </Animated.View>
  )
})
export default CommentBox
const style = StyleSheet.create({
  container: {
    position: 'absolute',
    zIndex: 10,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
  },
  scrollView: {
    width: '100%',
    paddingHorizontal: 12,
    height: '100%',
  },
  containerWrap: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
  },
  header: {
    height: 68,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingHorizontal: 24,
  },
  bottom: {
    width: '100%',
  },
  bar: {
    height: 4,
    width: 54,
    borderRadius: 4,
    marginTop: 8,
    backgroundColor: '#ccc',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  authorCover: {
    width: 38,
    height: 38,
    borderRadius: 19,
  },
  author: {
    color: '#333',
    fontSize: 16,
    marginRight: 'auto',
    marginLeft: 12,
  },
  title: {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold',
    paddingVertical: 12,
  },
  desc: {
    color: '#333',
    fontSize: 16,
    lineHeight: 20,
    marginBottom: 12,
  },
  tip: {
    paddingVertical: 12,
  },
  likeBtn: {
    borderColor: '#bbb',
    marginLeft: 'auto',
    borderWidth: 1,
    borderRadius: 1,
    padding: 2,
    paddingHorizontal: 4,
  },
  like: {
    fontSize: 12,
    color: '#999',
  },
  date: {
    fontSize: 12,
    color: '#999',
  },
  commentWrap: {
    borderTopColor: '#e1e1e1',
    paddingTop: 12,
    borderTopWidth: 1,
  },
  commentTitle: {
    color: '#333',
    fontSize: 16,
    fontWeight: 'bold',
  },
  sign: {
    color: '#73d7f7',
    marginLeft: 12,
    marginTop: 6,
    fontSize: 14,
  },
  signWrap: {
    marginHorizontal: -12,
    flexWrap: 'wrap',
  },
})
